<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
      <style>
          .container{
              display: flex;
              flex-direction: row;
              flex-wrap: wrap;
              /*
               Flex(弹性盒子)
               默认值为row row-reverse
               column column-reverse
               */
              width: 300px;
          }
          .item{
              width: 150px;
          }
          .container :nth-child(1){
              background-color: #646cff;
              height: 150px;
          }
          .container :nth-child(2){
              background-color: #213547;
              height: 150px;
          }
          .container :nth-child(3){
              background-color:#eccf34;
              height: 150px;
          }
          .container2{
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              width: 300px;
              justify-content: space-between;
              align-items: center;
          }

          .item2{
              width: 50px;
          }

          .container2 :nth-child(1){
              background-color: #cf6d6d;
              height: 100px;
          }
          .container2 :nth-child(2){
              background-color: #8cd54a;
              height: 200px;
          }
          .container2 :nth-child(3){
              background-color: #3886d5;
              height: 300px;
          }

          .container3{
              display: flex;
              flex-direction: row;
              flex-wrap: wrap;
              width: 300px;
              height: 300px;
              align-content: space-between;
          }

          .item3{
              width: 100px;
          }

          .container3 :nth-child(1){
              background-color: #8cd54a;
              height: 70px;
          }

          .container3 :nth-child(2){
              background-color: #4a94d5;
          }

          .container3 :nth-child(3){
              background-color: #bf228a;
          }

          .container3 :nth-child(4){
              background-color: #eccf34;
          }

          .container3 :nth-child(5){
              background-color: #8cd54a;
          }

          .container3 :nth-child(6){
              background-color: #25aba4;
              height: 70px;
          }

          .container3 :nth-child(7){
              background-color: #8cd54a;
          }

          .container3 :nth-child(8){
              background-color: #744ad5;
          }

          .container3 :nth-child(9){
              background-color: #9a38b4;
              height: 70px;
          }
      </style>
  </head>
  <body>
  <!--
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
  -->
  <!--
          div p 是块级元素，可以设置宽和高，并且自占一行
          span  是行内元素，不可以设置宽和高
      -->
  <div class="container">
      <div class="item">item1</div>
      <div class="item">item2</div>
      <div class="item">item3</div>
  </div>

  <h1>第二个弹性盒子</h1>
  <div class="container2">
      <div class="item2">item1</div>
      <div class="item2">item2</div>
      <div class="item2">item3</div>
  </div>

  <h1>第三个弹性盒子</h1>
  <div class="container3">
      <div class="item3">item1</div>
      <div class="item3">item2</div>
      <div class="item3">item3</div>
      <div class="item3">item4</div>
      <div class="item3">item5</div>
      <div class="item3">item6</div>
      <div class="item3">item7</div>
      <div class="item3">item8</div>
      <div class="item3">item9</div>
  </div>
  </body>
</html>
